<template>
  <div class="container">
    <!-- 背景 start-->
    <!-- <div class="bg_nav">
      <img :src="bgUrl" />
      <img :src="starbgUrl" />
    </div>-->
    <!-- 背景 end -->

    <!-- 内容部分 start -->
    <div class="contenenr">
      <!-- 居中容器 start -->
      <div class="middle" v-if="equipment == 2">
        <!-- 文章list start -->
        <div>
          <div class="sift_out">
            <div class="sift_content">
              <img :src="green" alt />
              <span>&nbsp;&nbsp;文章精选</span>
            </div>
            <div>
              <div
                v-for="(item,index) in siftList"
                :key="index"
                class="sift"
                @click="viewThisBlog(item.id)"
              >
                <img :src="item.imgUrl" alt />
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>
          <div class="sift_out" style="margin-top:20px">
            <div class="sift_content">
              <img :src="green" alt />
              <span>&nbsp;&nbsp;恋爱秘籍</span>
            </div>
            <div>
              <div
                v-for="(item,index) in secret"
                :key="index"
                class="sift"
                @click="viewThisBlog(item.id)"
              >
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="article_content_title_top">
            <img :src="home" />&nbsp;&nbsp;
            <a href>首页</a>/
            <a href>文章列表</a>
          </div>
          <div class="article_list article_list_top">
            <div v-for="(item,index) in data" :key="index" @click="viewThisBlog(item.id)">
              <div class="articl_content">
                <div class="article_img" ref="article_img">
                  <img :src="item.imgUrl+'?imageView2/1/w/246/h/165'" />
                </div>
                <div class="article_content" :value="item.id">
                  <div class="article_data">
                    <div class="article_content_title">
                      <span class="article_content_title_text">{{item.title}}</span>
                    </div>
                    <div class="article_review">
                      <div>
                        <span>Time:{{new Date(item.createTime).format('yyyy-MM-dd')}}</span>
                      </div>
                      <div v-html="item.contentCopy"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: right;margin-top: 5px;color:red;">
                <span style="cursor:pointer;">点击阅读 》</span>
              </div>
            </div>
          </div>
          <!-- 文章list end -->
          <!-- 分页  start -->
          <div class="more_nav">
            <div>
              <div @click="HomePage">首页</div>
              <div @click="prePage">上一页</div>
              <div
                v-for="(item,index) in allPage"
                :key="index"
                :class="{ activez: item == list.page}"
                @click="changePage(item)"
              >{{item}}</div>
              <div @click="nextPage">下一页</div>
              <div @click="lastPage">末页</div>
            </div>
          </div>
          <!-- 分页  end -->
        </div>
      </div>
      <!-- 居中容器 end -->
      <!-- 导航栏  start-->
      <div class="navigation">
        <li data-menuanchor="slide01" class="active">
          <router-link to="https://www.lovemissapp.com">首页</router-link>
        </li>
        <li data-menuanchor="slide02">
          <router-link to="https://www.lovemissapp.com/dynaPage">动态</router-link>
        </li>
        <li data-menuanchor="slide03">
          <router-link to="https://www.lovemissapp.com/aboutPage">关于我们</router-link>
        </li>
        <li data-menuanchor="slide04">
          <router-link to="https://www.lovemissapp.com/downPage">下载</router-link>
        </li>
      </div>
      <!-- 导航栏  end-->
      <div class="foot_use">
        <div>云南楚雄市喵爪科技有限公司</div>
        <div>联系我们：0878-3888766</div>
        <div>备案号：滇ICP备19006033号</div>
      </div>
    </div>
    <!-- 内容部分 end -->
  </div>
</template>

<script>
import { dateFormat } from "~/utils/index";
import md5 from "js-md5";
import axios from "~/plugins/axios";
dateFormat();
export default {
  head() {
    return {
      title: "恋爱密室-动态",
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "恋爱密室是一款私密且真实靠谱的交友app，每个人内心深处都有一个密室，只有那把意喻着真爱的密匙才能开启你的心门。在恋爱密室，我们会带领着那个属于你的ta，跨过心门，走进密室，贴近你的灵魂"
        },
        {
          name: "keywords",
          content: "恋爱密室，恋爱密室app，恋爱密室官网，恋爱密室下载"
        }
      ]
    };
  },
  async asyncData({ params }) {
    try {
      const {
        data: { data }
      } = await axios({
        method: "post",
        url: "https://www.lovemsss.cn/bg/operateWebArticle/pageListArticle/lv2",
        data: {
          classStr: "",
          page: 1,
          pageSize: 6,
          sign: md5(String(1) + String(6))
        }
      });
      const reg = /<p[^>]*>(?:(?!<\/p>)[\s\S])*<\/p>/gi;
      const str = data.articleList.map(v => {
        const str = v.content
          .match(reg)[0]
          .replace(/\s+/g, "")
          .replace(/<\/?p[^>]*>/gi, "");
        v.contentCopy = str;
        return v;
      });
      console.log(str);
      // console.log(data.selectedList);

      return {
        data: data.articleList,
        siftList: data.selectedList,
        allPage: Math.ceil(data.count / 6),
        secret: data.newsList
      };
    } catch (err) {
      error({ statusCode: 404 });
    }
  },
  data() {
    return {
      logoUrl: require("@/assets/article/logo.png"),
      bgUrl: require("@/assets/article/bg.jpg"),
      starbgUrl: require("@/assets/article/starbg.png"),
      eyegUrl: require("@/assets/article/eye.png"),
      reviewbgUrl: require("@/assets/article/review.png"),
      article: require("@/assets/article/article.png"),
      home: require("@/assets/article/home.png"),
      green: require("@/assets/article/green.png"),
      off_on: true,
      equipment: 2,
      list: {
        classStr: "",
        page: 1,
        pageSize: 6
      },
      allPage: "",
      data: null,
      loading: false,
      siftList: [], // 精选列表
      secret: null //秘籍列表
    };
  },
  methods: {
    // 分页获取文章数据
    getList() {
      axios
        .post(
          "https://www.lovemsss.cn/bg/operateWebArticle/pageListArticle/lv2",
          {
            classStr: "",
            page: this.list.page,
            pageSize: this.list.pageSize,
            sign: md5(String(this.list.page) + String(this.list.pageSize))
          }
        )
        .then(res => {
          const reg = /<p[^>]*>(?:(?!<\/p>)[\s\S])*<\/p>/gi;
          this.data = res.data.data.articleList.map(v => {
            const str = v.content
              .match(reg)[0]
              .replace(/\s+/g, "")
              .replace(/<\/?p[^>]*>/gi, "");
            this.$set(v, "contentCopy", str);
            return v;
          });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 分页跳转
    changePage(e) {
      this.list.page = e;
      this.getList();
    },
    // 跳转到阅读选择的blog
    viewThisBlog(id) {
      var that = this;
      axios
        .post("https://www.lovemsss.cn/bg/operateWebArticle/addbrowseNum", {
          articleId: id,
          sign: md5(String(id))
        })
        .then(res => {
          that.$router.push({ path: `/details/${id}` + ".html" });
          // that.$router.push({
          //   name: "details-id",
          //   params: {
          //     id: id
          //   }
          // });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    parseTime(data) {
      const ss = parseTime(data, "{y}-{m}-{d}");
      return ss;
    },
    // 分页 首页按钮
    HomePage() {
      this.list.page = 1;
      this.getList();
    },
    // 上一页 按钮
    prePage() {
      if (this.list.page > 1) {
        this.list.page = this.list.page - 1;
      } else {
        return;
      }
      this.getList();
    },
    // 下一页 按钮
    nextPage() {
      if (this.list.page < this.allPage) {
        this.list.page = this.list.page + 1;
      } else {
        return;
      }
      this.getList();
    },
    // 末页 按钮
    lastPage() {
      this.list.page = this.allPage;
      this.getList();
    }
  }
};
</script>

<style scoped>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
.app_conten {
  padding-top: 80px;
  z-index: 999;
}
.el-container {
  background-color: #f1f1f1;
}
/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/* 滚动条里面小方块 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
/* 滚动条里面轨道 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
} /* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/* 滚动条里面小方块 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
/* 滚动条里面轨道 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.appnav {
  display: none;
}

.more_nav_app {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  background: rgba(102, 140, 249, 0.8);
  color: white;
}

header a {
  color: white;
}

.container-fluid {
  padding: 0;
  display: flex;
  justify-content: center;
}

.navbar {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 99999;
  padding: 10px 0;
}
.navigation-row {
  flex-grow: 1;
}
#nav {
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  justify-content: space-around;
}

.navbar-nav li {
  margin-left: 30px;
}

a {
  text-decoration: none;
}

.logo {
  display: flex;
  align-items: center;
}

.logo span {
  color: white;
  margin-left: 0.5rem;
  font-weight: 700;
  font-size: 32px;
}

.slogan {
  width: 1000px;
  padding-bottom: 35px;
}

.slogan > div:first-child {
  color: white;
  font-size: 26px;
  padding-bottom: 15px;
}

.slogan > div:last-child {
  color: #00b9df;
  font-size: 32px;
}

#slider_one {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.contenenr {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.middle {
  position: relative;
  width: 50%;
  padding-top: 90px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.middle > div:nth-child(1) {
  width: 25%;
}

.middle > div:nth-child(2) {
  width: 70%;
  background-color: white;
}

.article_list {
  width: 100%;
}

.article_list > div {
  display: flex;
  flex-direction: column;
  padding: 20px 20px;
  border-bottom: 1px solid #e3e3e3;
}
/* 文章头部导航栏 */
.article_content_title_top {
  border-bottom: 1px solid #e3e3e3;
  padding: 20px 20px;
  display: flex;
  align-items: center;
}
.article_content_title_top > img {
  transform: scale(0.9);
}

/* 文章容器 */
.articl_content {
  display: flex;
  justify-content: space-between;
}

.articl_content > div:nth-child(1) {
  width: 30%;
}

.articl_content > div:nth-child(2) {
  width: 65%;
}

/* 文章容器 right */
.article_content {
  padding-left: 25px;
}

/* 文章头部样式 */
.article_content_title {
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 416px;
  text-align: left;
}

.article_content_title_text {
  color: #333;
  font-size: 1.3rem;
}

/* 文章时间 */
.article_review > div:nth-child(1) {
  font-size: 0.9rem;
  padding: 15px 0;
  text-align: left;
}

/* 文章内容 */
.article_review > div:nth-child(2) {
  font-size: 1rem;
  line-height: 30px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: left;
}
.sift_out {
  background-color: white;
}
.sift_content {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  padding: 20px 0;
}
/* 文章精选 */
.sift {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
.sift > img {
  width: 246px;
}
.sift > span {
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 246px;
  padding: 20px 0;
}
/* 分页样式 */
.more_nav {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.more_nav > div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.more_nav > div > div {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  padding: 8px 15px;
}
.more_nav > div > div:last-child {
  border-right: 1px solid #ddd;
}
.activez {
  background-color: #ec1a6c;
}
/* 底部导航 */
.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation > li {
  padding: 30px 15px;
  cursor: pointer;
  list-style: none;
}
a {
  color: black;
}
.foot_use {
  /* display: flex; flex-direction: column;align-items: center; justify-content: center; */
  font-size: 0.8rem;
}

@media (max-width: 1200px) {
  .sift_out {
    display: none;
  }
  .middle {
    width: 80%;
  }
  .middle > div:nth-child(1) {
    width: 100%;
  }
  .middle > div:nth-child(2) {
    width: 100%;
  }
  .article_content_title {
    width: 280px;
  }
}
@media (max-width: 900px) {
  .middle {
    width: 95%;
  }
  /* 文章内容 */
  .article_review > div:nth-child(2) {
    font-size: 0.8rem;
    line-height: 30px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .article_content_title_text {
    font-size: 1rem;
  }
  .articl_content > div:nth-child(1) {
    width: 30%;
  }
  .article_img > img {
    width: 100%;
  }
  .navbar {
    width: 100%;
    padding: 0 20px;
  }
  .logo {
    flex-direction: column;
  }
  .logo > img {
    transform: scale(0.8);
  }
  .logo > span {
    display: none;
  }
}
@media (min-width: 1200px) {
  .middle {
    width: 1200px;
  }
}
</style>
